<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-29 20:14:39
 * @LastEditTime: 2023-07-19 17:12:19
 * @FilePath: \myblog\src\components\base\BaseModal.vue
-->
<template>
  <div>
      <el-dialog :title="title" :visible.sync="isShow" :width="width" :before-close="close">
        <BaseFrom :type="type" ref="form"/>
        <div slot="footer" class="dialog-footer">
          <el-button v-for="btn in btns" :key="btn.targetName" @click="handlerBtn(btn.targetName, btn.isSubmit)">{{btn.name}}</el-button>
        </div>
      </el-dialog>       
  </div>
</template>

<script>
import BaseFrom from '@/components/base/BaseForm.vue'
import MODAL_DATA from '@/config/modal.config'
import { createNamespacedHelpers } from 'vuex'
const {mapState, mapActions} = createNamespacedHelpers('modal');
export default {
  components:{
    BaseFrom
  },
  data(){
    return {
    }
  },
created(){
},
mounted(){},
watch:{
 
},
computed:{
  ...mapState(['isShow', 'type']),
  title() {
    return MODAL_DATA[this.type]?.title ?? '默认modal'
  },
  width() {
    return MODAL_DATA[this.type]?.width ?? '60%'
  },
  btns() {
    return MODAL_DATA[this.type]?.btns ?? [
      {
        targetName: 'close',
        name: '取消'
      },
      {
        targetName: 'confirm',
        name: '提交',
        isSubmit: true
      }
    ]
  },
},
methods:{
  ...mapActions(['close', 'open', 'confirm']),
  handlerBtn(action, isSubmit) {
    if (isSubmit)
    {
      this.submitForm(this.type);
      return 
    }
    this[action] && this[action]();
  },
  submitForm() {
    let refForm = this.$refs['form'];
        refForm.$refs['elForm'].validate(async (valid) => {
          if (valid) {
            try{
              await this.$api({type: this.type, data: refForm.form});
              this.close();
              this.$EventBus.$emit('updateView')
            }
            catch(err)
            {
              this.$message.error({
              title: '错误',
              message: err.message
              });
              refForm.$refs['elForm'].resetFields();
            }
          } else {
            return false;
          }
        });
      }
},
}
</script>
<style  scoped>
</style>